<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrapper {
            width: 600px;
            margin: 50px auto;
        }

        .nav {
            display: flex;
            line-height: 40px;
            text-align: center;
        }

        .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        .nav li+li {
            border-left: 0;
        }

        .active {
            background-color: pink;
            color: #fff;
            font-size: 18px;
            transition: all 0.25s;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="nav">
            <!-- <li data-index="0">nav_01</li>
            <li data-index="1">nav_02</li>
            <li data-index="2">nav_03</li>
            <li data-index="3">nav_04</li>
            <li data-index="4">nav_05</li>
            <li data-index="5">nav_06</li> -->
            <li>nav_01</li>
            <li>nav_02</li>
            <li>nav_03</li>
            <li>nav_04</li>
            <li>nav_05</li>
            <li>nav_06</li>
        </ul>
    </div>
</body>
<script>
    var navItems = document.querySelectorAll(".nav li");
    console.log(navItems);

    // 给每一个li绑定事件 => 打印元素的内容和下标
    // navItems[0].onclick = function () {//this}
    // navItems[1].onclick = function () {//this}
    // navItems[2].onclick = function () {//this}
    // navItems[3].onclick = function () {//this}
    // navItems[4].onclick = function () {//this}
    // navItems[5].onclick = function () {//this}

    // 效果1: 
    // 点击li => 当前导航添加活跃状态的样式  其他的所有同级li清除活跃状态的样式

    // debugger;  //加载时执行
    for (var i = 0; i < navItems.length; i++) {
        var li = navItems[i];  // 遍历每一个li
        li.setAttribute("data-index", i);

        li.onclick = function () { // 给li绑定事件 => 点击时执行(页面加载时不执行)
            // console.log(this); //  事件中的this -> 指向绑定事件的元素
            // var index = this.dataset.index;
            // console.log(this.textContent, index);

            // this.style.backgroundColor = "pink";
            // this.style.color = "#fff";
            // this.style.fontSize = "18px";

            this.className = "active"; //只用设置一次class名
        }
    }

    console.log("页面加载完毕", li, i);




</script>

</html>